import React, {useEffect, useState} from 'react'
import {Form, Button, Input, Modal, Row, Col, message, Descriptions, Select, Image} from 'antd'
import {connect} from 'umi'
import {genderList, isAuditList, auditStatusList} from '@/utils/constant'

const FormItem = Form.Item;
const {TextArea} = Input;

const formLayout = {
  labelCol: {span: 7},
};


const CreateForm = (props) => {
  const {onSubmit, onCancel, loading, visible, operateType, record} = props;
  const [form] = Form.useForm();
  const [title, setTitle] = useState('');


  useEffect(() => {
    if (visible && record) {
      setTitle(operateType===0?'驳回':operateType===1?'审核':'详情');
    }
  }, [visible]);

  const onFormCancel = () => {
    form.resetFields();
    onCancel();
  };

  const handleSubmit = async () => {
    const fieldsValue = await form.validateFields();
    let id = record.id;
    let status = operateType === 0 ? 2 : 1;
    onSubmit({...fieldsValue, status, id});
    form.resetFields();
  };

  const renderContent = () => {
    return (
      <>
        <Descriptions column={2}>
          <Descriptions.Item label="姓名">{record && record.name}</Descriptions.Item>
          <Descriptions.Item label="身份证">{record && record.idcard}</Descriptions.Item>
          <Descriptions.Item label="性别">{record && genderList.find(item => item.value===record.gender)?.label}</Descriptions.Item>
          <Descriptions.Item label="出生年月">{record && record.birthday}</Descriptions.Item>
          <Descriptions.Item label="证书编号">{record && record.credentialNo}</Descriptions.Item>
          <Descriptions.Item label="管理编号">{record && record.mangerNo}</Descriptions.Item>
          <Descriptions.Item label="授予时间">{record && record.startTime}</Descriptions.Item>
          <Descriptions.Item label="到期时间">{record && record.endTime}</Descriptions.Item>
          <Descriptions.Item label="证书级别">{record && record.credentialLevel}</Descriptions.Item>
          <Descriptions.Item label="职称系列">{record && record.jobSeries}</Descriptions.Item>
          <Descriptions.Item label="资格名称">{record && record.credentialName}</Descriptions.Item>
          <Descriptions.Item label="专业">{record && record.profession}</Descriptions.Item>
          <Descriptions.Item label="批准机关">{record && record.approvalAuthority}</Descriptions.Item>
          <Descriptions.Item label="注册单位">{record && record.registerOrg}</Descriptions.Item>
          <Descriptions.Item label="是否年审">{record && isAuditList.find(item => item.value===record.isAudit)?.label}</Descriptions.Item>
          <Descriptions.Item label="是否挂证">{record && isAuditList.find(item => item.value===record.hangStatus)?.label}</Descriptions.Item>
          <Descriptions.Item label="审批状态">{record && auditStatusList.find(item => item.value===record.status)?.label}</Descriptions.Item>
        </Descriptions>
        <Descriptions>
          <Descriptions.Item label="证件照片">
            {
              (record && record.fileUrl) && record.fileUrl.split(',').map((item,index) => (
                <Image key={index} style={{margin:'10px'}} width={200} src={item}/>
              ))
            }
          </Descriptions.Item>
        </Descriptions>
        {
          operateType===0 &&
          <FormItem name="reason" labelCol={2} label="驳回原因" rules={[{required: true, message: '驳回原因不能为空'}]}>
            <TextArea rows={4}/>
          </FormItem>
        }
      </>
    )
  };

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => onFormCancel()}>{operateType !== 2 ?'取消':'关闭'}</Button>
        {
          operateType !== 2 &&
          <Button type="primary" onClick={() => handleSubmit()} loading={loading}>{operateType === 0 ? '驳回' : '确定'}</Button>
        }
      </>
    )
  };

  return (
    <Modal
      width='75%'
      title={title}
      visible={visible}
      bodyStyle={{padding: '0 5%'}}
      footer={renderFooter()}
      onCancel={() => onFormCancel()}
    >
      <Form
        {...formLayout}
        form={form}
        style={{paddingTop: '24px'}}
      >
        {renderContent()}
      </Form>
    </Modal>
  )
}

export default connect(({user}) => ({
  currentUser: user.currentUser,
}))(CreateForm)
